<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>react</title>
    <style>
      .name {
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>

    <script src="../day01/lib/react.development.js"></script>
    <script src="../day01/lib/react-dom.development.js"></script>
    <script src="../day01/lib/babel.js"></script>

    <script type="text/babel">
      // 创建组件的两种方式

      // 1. class -> 类组件

      // 定义组件
      class MyComponent extends React.Component {
        render() {
          // render方法return的结果，就是当前组件渲染的内容
          return <div>MyComponent~~~~</div>;
        }
      }

      // 使用组件
      const element = <MyComponent />;
      // const element = <MyComponent></MyComponent>;

      /*
        注意事项：
          1. 类组件必须继承React.Component类
          2. 组件名称首字母必须大写
            React JSX语法内部通过标签名称来识别
              名称首字母大写，会当做组件解析
              名称首字母小写，会当做html元素解析
          3. 必须定义render方法，render方法返回值就是渲染的内容
      */

      ReactDOM.createRoot(document.getElementById("root")).render(element);
    </script>
  </body>
</html>
